<template>
  
  <!-- 左侧栏 -->
  <div class="left-panel" :class="{ 'panel-collapsed': !showLeftState }"
    :style="{ height: showTimeAxis ? 'calc(100vh - 125px)' : 'calc(100vh - 75px)' }">
    <div class="panel-toggle" @click="showLeftState = !showLeftState">
      <el-icon class="toggle-icon">
        <DArrowRight v-if="!showLeftState" />
        <DArrowLeft v-else />
      </el-icon>
    </div>

    <el-tabs type="border-card" class="custom-tabs">
      <el-tab-pane label="飞行参数">
        <!-- 参数选择区 -->
        <div class="params-selector">
          <el-checkbox-group v-model="fjParamsChecked" class="params-group" @change="updateChart">
            <el-checkbox v-for="param in flightParams" :key="param.value" :label="param.label"
              :style="{ color: param.color }" />
          </el-checkbox-group>
        </div>

        <!-- 图表区域 -->
        <div class="chart-container" id="aircraftParameters"></div>
      </el-tab-pane>

      <el-tab-pane label="雷达剖面">
        <div class="radar-container">
          <!-- <img src="@/assets/images/radarProfile.png" alt="雷达剖面图"> -->
        </div>
      </el-tab-pane>

      <el-tab-pane label="DMT探测">
        <div class="radar-container">
          <!-- <img src="@/assets/images/dmt.png" alt="DMT探测图"> -->
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

  <!-- 右侧控制面板 -->
  <RightSideContent>
    <template #function-content>
    <div class="control-panel">
      <div class="panel-header">
        <h3>飞机架次</h3>
      </div>

      <div class="panel-content">
        <!-- 搜索区域 -->
        <div class="search-area">
          <el-select v-model="selectedArea" placeholder="区域" size="small" class="area-select">
            <el-option v-for="area in areas" :key="area.value" :label="area.label" :value="area.value" />
          </el-select>

          <el-date-picker v-model="flightTime" type="date" placeholder="选择时间" size="small" class="date-picker" />

          <el-button type="primary" size="small" @click="searchFlight">
            查询
          </el-button>
        </div>

        <!-- 飞机列表 -->
        <div class="flight-list">
          <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="flight in flights" :key="flight.id" :value="flight.id" class="flight-item">
              {{ flight.name }}
            </el-checkbox>
          </el-checkbox-group>
        </div>

        <!-- 雷达选择 -->
        <div class="radar-selection">
          <el-checkbox-group v-model="radarSelection" size="small" class="radar-group">
            <el-checkbox-button value="plane">雷达平面</el-checkbox-button>
            <el-checkbox-button value="profile">雷达剖面</el-checkbox-button>
          </el-checkbox-group>
        </div>
      </div>
    </div>
  </template>
  </RightSideContent>
</template>

<script setup>
import RightSideContent from "@/components/RightSideContent/index.vue";
import { getAssets } from "@/utils/index.ts";
import { reactive, onMounted, ref, toRefs, watch, nextTick, computed } from "vue";
import { useRoute } from "vue-router";
import * as echarts from "echarts"
import { todaysFlights, flightTrajectory } from "@/api/planeReplayData/index.ts";
import { MapManager } from "@/components/cme-base2D/core/MapManager";
import dataJson from "@/assets/data/index.json"
import mapStore from "@/stores/modules/map.ts";
const mapStores = mapStore()
const olService = MapManager.getInstance()
const route = useRoute()
const showTimeAxis = computed(() => {
  let fullScreenMenu = ['/home/index', '/planeReplay', '/safeGuard/planeReplay']
  return fullScreenMenu.includes(route.path)
})
const data = reactive({
  // 飞机参数选择
  fjParamsChecked: ["航向"],
  // 飞机参数图表数据
  locusData: [
    {
      date: "2024-09-26",
      bearing: "223",
      alt: 37.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:32:45",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "66",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:33:47",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "219",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:34:49",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "350",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:35:52",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "46",
      alt: 31.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:36:54",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "351",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:37:56",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "154",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:38:58",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "308",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:40:00",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "63",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:42:04",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "174",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:43:05",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "248",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:44:07",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "186",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:47:14",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "331",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:48:16",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "322",
      alt: 34.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:49:18",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "337",
      alt: 34.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:50:20",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "15",
      alt: 34.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:51:22",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "358",
      alt: 34.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:52:24",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "64",
      alt: 34.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:53:25",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "339",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:54:27",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "346",
      alt: 34.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:55:30",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "0",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:57:34",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "332",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:58:36",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "325",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "08:59:38",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "163",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:00:40",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "263",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:01:42",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "29",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:02:44",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "352",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:03:45",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "342",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:05:49",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "118",
      alt: 34.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:06:51",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "101",
      alt: 34.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:07:54",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "348",
      alt: 34.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:08:56",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "133",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:11:00",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "338",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:12:02",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "197",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:13:03",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "148",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:14:05",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "345",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:16:10",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "131",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:17:12",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "37",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:18:14",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "140",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:19:16",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "263",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:20:18",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "89",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:21:20",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "253",
      alt: 34.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:22:22",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "69",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:23:23",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "225",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:24:25",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "152",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:25:28",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "55",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:26:30",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "130",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:27:32",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "350",
      alt: 33.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:28:34",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "316",
      alt: 35.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:29:36",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "170",
      alt: 34.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:30:38",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "335",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:31:40",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "290",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:32:42",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "230",
      alt: 31.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:33:44",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "278",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:34:46",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "338",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:35:48",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "35",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:36:51",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "64",
      alt: 31.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:37:53",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "285",
      alt: 30.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:38:55",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "38",
      alt: 30.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:39:57",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "301",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:40:59",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "204",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:42:01",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "178",
      alt: 35.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:43:03",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "349",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:44:04",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "68",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:45:06",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "141",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:46:09",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "307",
      alt: 32.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:47:11",
      lat: 40.1504,
      status: "",
    },
    {
      date: "2024-09-26",
      bearing: "293",
      alt: 31.0,
      lon: 116.3162,
      speed: "0",
      radarCrExtent: "",
      catalyst: "",
      temperature: "31.2",
      dbzs: "",
      humidity: "40",
      radarCrPath: "",
      time: "09:48:13",
      lat: 40.1504,
      status: "",
    },
  ],
  showFunctionalArea: true,
  showLeftState: false,
  checkList: [],
  workPointCheckList: [],
  workPoint: [
    {
      label: 'antiaircraftGun',
      name: '高炮',
      icon: getAssets('images/equipment/antiaircraftGun5.png')
    },
    {
      label: 'rocket',
      name: '火箭',
      icon: getAssets('images/equipment/rocket5.png')
    },
    {
      label: 'smokeStove',
      name: '烟炉',
      icon: getAssets('images/equipment/smokeStove5.png')
    },
    {
      label: 'gasCannon',
      name: '燃气炮',
      icon: getAssets('images/equipment/gasCannon5.png')
    },
  ],
  radarSelection: [],
  flightTime: ""
})

const { locusData, fjParamsChecked, flightTime, radarSelection, workPoint, workPointCheckList, checkList, showLeftState, showFunctionalArea } = toRefs(data)
onMounted(() => {
  // initCharts()
  mapStores.pushMapType('layer')
  getPlanData()
})

// 飞机参数
const updateChart = () => {
  nextTick(() => {
    initCharts()
  })
}

// 雷达剖面
const drawRadar = () => { }

const workPointChange = (value) => {
  let data = dataJson[value[value.length - 1]].map(item => ({
    ...item,
    image: getAssets('images/equipment/' + value[value.length - 1] + '5.png')
  })
  )
  olService.addMarks(value[value.length - 1], data, true)
}
watch(() => mapStores.timelineParameters, (newVal) => {
  console.log(newVal);
  olService.playBackMove(newVal.time)
})

const searchFlight = () => {

}

const getPlanData = () => {
  let OlCzmlConfig = {
    id: "doucument",  // czml标识 / 数据标识
    clock: {
      interval: '',  // 时间区间 "开始时间戳/结束时间戳"
      currentTime: '', //  当前时间 时间戳
      multiplier: 1, // 播放 速度  默认为1
      loopPlayback: 1 // 0循环 1 不循环
    },
    data: []
  }
  let ModelConfig = {
    id: '',
    name: '',
    epoch: 0,// 起始时间
    model: {
      img: '',  // 图片路径
      scale: 0.8,
      type: 'png'
    },
    position: {
      heading: [], // 水平角信息 [0.2,0.1.....],
      coordinate: [], // 坐标信息  [[0,0],[1,1]]
      time: [], // 时间信息 [0,1,2,3,4,5]
      information: []  // 其他信息 [[{id:123,name:456}]]
    }
  }

  olService.getAnalysisCSV(getAssets('data/csv/hangji.csv')).then(res => {   
    let heading = [];   //  水平角数据
    let coordinates = [];  // 坐标
    let information = []; // 其他信息
    let time = []; // 时间
    res.forEach(item => {
      coordinates.push([item[4], item[5]]) //  坐标
      time.push(new Date(item[2] + " " + item[3]).getTime())  // 时间
    })
    // 组结构数据
    OlCzmlConfig.clock.interval = `${time[0]}/${time[time.length - 1]}`
    OlCzmlConfig.clock.currentTime = time[0]
    ModelConfig.id = "testId"
    ModelConfig.epoch = time[0]
    ModelConfig.name = 'JL_B3836_202404231500'
    ModelConfig.model.img = getAssets('images/model/feiji.png')
    ModelConfig.position.coordinate = coordinates
    ModelConfig.position.time = time
    OlCzmlConfig.data.push(ModelConfig)
    mapStores.setTime(
      {
        startTime: time[0],
        endTime: time[time.length - 1],
      })
      console.log(OlCzmlConfig);
      
    olService.initializePlayback(OlCzmlConfig)
    // olService.getAnalysisCSV(getAssets('data/csv/hangji2.csv')).then(res => {
    //   let heading = [];   //  水平角数据
    //   let coordinates = [];  // 坐标
    //   let information = []; // 其他信息
    //   let time = []; // 时间
    //   res.forEach(item => {
    //     // 组装参数
    //     coordinates.push([item[4], item[5]]) //  坐标
    //     time.push(new Date(item[2] + " " + item[3]).getTime())  // 时间
    //   })

    //   // 组结构数据
    //   ModelConfig2.id = "testId2"
    //   ModelConfig2.epoch = time[0]
    //   ModelConfig2.name = '测试飞机2'
    //   ModelConfig2.position.coordinate = coordinates
    //   ModelConfig2.position.time = time
    //   ModelConfig2.model.img = getAssets('images/model/feiji.png')
    //   OlCzmlConfig.data.push(ModelConfig2)

    //   olService.initializePlayback(OlCzmlConfig)

    // })

  })


}

let myChart = null
let timer = null
//图表初始化
const initCharts = () => {
  const myChart = echarts.init(
    document.getElementById("aircraftParameters")
  );
  let option = {
    title: {
      top: "1%",
      left: "50%",
      textAlign: "center",
      text: "飞机参数",
    },
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        let tooltipContent = `${params[0].axisValue}<br/>`;
        params.forEach((param) => {
          tooltipContent += `${param.marker} ${param.seriesName}: ${param.data} ${param.seriesIndex === 0 ? "米" : param.seriesIndex === 1 ? "°C" : param.seriesIndex === 2 ? "%" : param.seriesIndex === 3 ? "kn" : "°"}<br/>`;
        });
        return tooltipContent;
      },
    },
    color: ["#00b7ee", "#5a5863", "#22ac38", "#ff0000", "#1139a0"],
    legend: {
      right: "10%",
      top: "8%",
      left: 0,
      data: ["高度", "温度", "相对湿度", "航速", "航向"],
    },
    grid: {
      right: "10%",
      left: "10%",
      top: "15%",
      bottom: "25%",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: locusData.value.map((item) => item.time),
    },
    yAxis: [
      {
        type: "value",
        position: "left",
        axisLine: {
          show: true,
        },
        axisLabel: {
          formatter: "{value}",
        },
      },
    ],
    dataZoom: [
      {
        show: true,
        height: 20,
        xAxisIndex: [0],
        bottom: 40,
        start: 10,
        end: 80,
        handleIcon:
          "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
        handleSize: "110%",
        handleStyle: {
          color: "#d3dee5",
        },
        textStyle: {
          color: "#fff",
        },
        borderColor: "#90979c",
      },
      {
        type: "inside",
        show: true,
        height: 15,
        start: 1,
        end: 35,
      },
    ],
    series: [
      {
        name: "高度",
        type: "line",
        lineStyle: {},
        symbol: "circle", // 使用圆形符号
        symbolSize: 4, // 修改圆点大小
        itemStyle: {
          color: "#FF0000", // 实心效果
        },
        data: locusData.value.map((item) => item.alt),
      },
      {
        name: "温度",
        type: "line",
        lineStyle: {},
        symbol: "circle",
        symbolSize: 4,
        itemStyle: {
          color: "#00BFFF",
        },
        data: locusData.value.map((item) => item.temperature),
      },
      {
        name: "相对湿度",
        type: "line",
        lineStyle: {},
        symbol: "circle",
        symbolSize: 4,
        itemStyle: {
          color: "#FF00FF",
        },
        data: locusData.value.map((item) => item.humidity),
      },
      {
        name: "航速",
        type: "line",
        lineStyle: {},
        symbol: "circle",
        symbolSize: 4,
        itemStyle: {
          color: "#1ce322",
        },
        data: locusData.value.map((item) => item.speed),
      },
      {
        name: "航向",
        type: "line",
        lineStyle: {},
        symbol: "circle",
        symbolSize: 4,
        itemStyle: {
          color: "#000000",
        },
        data: locusData.value.map((item) => item.bearing),
      },
    ],
  };

  const visibleSeries = option.series.filter((series) =>
    fjParamsChecked.value.includes(series.name)
  );

  myChart.setOption({
    ...option,
    series: visibleSeries,
    legend: {
      right: "10%",
      top: "8%",
      data: fjParamsChecked.value,
    },
  });

}
watch(() => showLeftState.value, () => {
  if (showLeftState.value) {
    // initCharts()
    updateChart()

  } else {
    // myChart.dispose()
    clearInterval(timer)
  }
})

// 新增数据
const flightParams = [
  { label: '高度', value: 'altitude', color: '#00b7ee' },
  { label: '温度', value: 'temperature', color: '#5a5863' },
  { label: '相对湿度', value: 'humidity', color: '#22ac38' },
  { label: '航速', value: 'speed', color: '#ff0000' },
  { label: '航向', value: 'heading', color: '#1139a0' }
]

const areas = [
  { label: '区域一', value: 'area1' },
  { label: '区域二', value: 'area2' }
]

const flights = [
  { id: 'JL_B3836_202404231500', name: 'JL_B3836_202404231500' }
]

const selectedArea = ref('')
</script>

<style lang="scss" scoped>
.left-panel {
  position: absolute;
  left: 0;
  top: 56px;
  height: calc(100vh - 210px);
  width: 380px;
  transition: all 0.3s ease;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);

  &.panel-collapsed {
    left: -380px;
  }
}

.panel-toggle {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 60px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);

  .toggle-icon {
    font-size: 16px;
    color: #666;
  }
}

.custom-tabs {
  height: 100%;

  :deep(.el-tabs__content) {
    height: calc(100% - 40px);
    padding: 0;
  }
}

.params-selector {
  padding: 10px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.params-group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.chart-container {
  height: 350px;
  padding: 10px;
}

.radar-container {
  padding: 10px;

  img {
    width: 100%;
    height: 230px;
    object-fit: cover;
  }
}

.control-panel {
  background: #F1F5FF;
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;

  .panel-header {
    margin-bottom: 12px;

    h3 {
      color: #1E55CC;
      font-size: 15px;
      font-weight: 600;
      line-height: 24px;
      margin: 0;
    }
  }

  .search-area {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;

    .area-select {
      width: 170px;
    }

    .date-picker {
      width: 120px;
    }

    :deep(.el-input__wrapper) {
      background-color: #fff;
    }
  }

  .flight-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .flight-item {
      margin: 0;
      padding: 8px 12px;
      background: rgba(67, 126, 241, 0.1);
      border-radius: 4px;
      width: 100%;
      box-sizing: border-box;

      &:hover {
        background: rgba(67, 126, 241, 0.2);
      }

      :deep(.el-checkbox__label) {
        font-size: 14px;
      }
    }
  }

  .radar-selection {
    padding-top: 12px;
    border-top: 1px solid #e0e6f5;

    .radar-group {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
  }
}

// 自定义滚动条样式
.flight-list {
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-track {
    background: #f5f7fa;
  }
}
</style>

<style lang="scss" scoped>
* {
  -moz-user-select: none;
  /*火狐*/
  /*选中文字时避免出现蓝色背景*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  /*选中文字时避免出现蓝色背景*/
  -ms-user-select: none;
  /*IE10*/
  /*选中文字时避免出现蓝色背景*/
  user-select: none;
  /*选中文字时避免出现蓝色背景*/
}

svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}



.content-item {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  background-color: #F1F5FF;
  border-radius: 6px;
  max-height: 250px;
  overflow: hidden;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;

  .content-item-title {
    color: #1E55CC;
    // font-family: "PingFang SC";
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 2px;
  }

  .checkboxItem {
    cursor: pointer;
    border-radius: 4px;
    background: rgba(67, 126, 241, 0.10);
    padding: 3px 3px 3px 10px;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 5px;
    font-size: 15px;
    margin-right: 0;
  }
}


.fjParams {
  :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
    color: #000 !important;
  }

  :deep(.el-checkbox) {

    margin-right: 5px !important;
  }
}
</style>
